<template>
  <div class="home_container">
    <Header @setUser="getUser"></Header>
    <main>
      <div class="left">
        <div class="portrait">
          <div class="avator">
            <el-avatar :src="userinfos.imgUrl" style="width:80px;height:80px;"></el-avatar>
          </div>
          <div>{{username}}</div>
          <div class="post">
            <span>{{postinfos.length}}帖子 · {{commentCount}}回复</span>
          </div>
          <div class="ranking">
            <div>
              <div>{{userinfos.integ}}</div>
              <div>积分</div>
            </div>
            <div>
              <div>{{praiseCount}}</div>
              <div>获赞</div>
            </div>
          </div>
          <div class="sendmsg">
            <i class="el-icon-chat-dot-square"></i>
            <span class="a" @click="privateLetter()">发私信</span>
          </div>
        </div>
        <ul>
          <li class="active">
            <a class="aActive" @click.prevent>TA的动态</a>
          </li>
        </ul>
        <div class="follow">
          <el-button
            ref="follow"
            type="primary"
            size="mini"
            @click="follow(1)"
            v-show="!isFollow"
          >关注TA ({{fansLength}})</el-button>
          <el-button
            ref="follow"
            size="mini"
            @click="follow(0)"
            v-show="isFollow"
          >已关注 ({{fansLength}})</el-button>
        </div>
      </div>
      <div class="right">
        <router-view :postinfos="postinfos" :postreplies="postreplies"></router-view>
      </div>
    </main>
  </div>
</template>
<script>
import Header from './header.vue'
export default {
  data() {
    return {
      username: '', // TA的昵称
      myName: '',
      userinfos: '', // 用户信息
      postinfos: [], // 帖子内容
      commentCount: '', // 评论总数量
      praiseCount: '', // 点赞总数量
      isFollow: false, // 关注标识
      fansLength: '',
      postreplies: [] // 我回复的
    }
  },
  created() {},
  methods: {
    getUser(data) {
      this.username = this.$route.query.id
      this.myName = data
    },
    // 获取帖子,用于帖子的数量
    async getpostAll() {
      const res = await this.$http.post('/getpostall', {
        username: this.username
      })
      // console.log(this.username + ':' + res)
      if (res.meta.status !== 200) {
        return this.$Message.error('获取个人信息失败')
      }
      return res.data
    },
    // 关注
    // 在自己的关注人中加username,在username的fans中加上myName
    async follow(flag) {
      const res = await this.$http.post('/follow', {
        flag: flag,
        userName: this.username,
        follow: this.myName
      })
      if (res.meta.status !== 200) {
        return this.$Message.error('服务器错误')
      }
      if (flag) {
        this.isFollow = true
        this.fansLength += 1
      } else {
        this.isFollow = false
        this.fansLength -= 1
      }
    },
    async getpostReplies() {
      const res = await this.$http.post('/getpostReplies/', {
        commentator: this.username
      })
      // console.log(this.username + ':' + res)
      if (res.meta.status !== 200) {
        return this.$Message.error('获取全部回复失败')
      }
      return res.data
    },
    // 获取帖子的内容
    async getappointPost(id) {
      const postRes = await this.$http.get('/getappointPost/' + id)
      if (postRes.meta.status !== 200) {
        return this.$Message.error('获取帖子信息失败')
      }
      return postRes.data
    },
    // 发送私信
    privateLetter() {
      this.$router.push({
        name: '/usercenter/msg',
        params: {
          name: this.username
        }
      })
    }
  },
  mounted() {
    this.comm.getuserInfo(this.username, this).then(data => {
      data.integ = this.comm.integSum(data.integ)
      var fans = data.fans
      this.fansLength = fans.length
      fans.forEach(item => {
        if (item === this.myName) {
          this.isFollow = true
        }
      })
      this.userinfos = data
    })
    this.getpostAll().then(data => {
      this.postinfos = data
      var commentCount = 0
      var praiseCount = 0
      for (let i = 0; i < data.length; i++) {
        commentCount += data[i].commentCount
        praiseCount += data[i].praisePerson.length
      }
      this.commentCount = commentCount
      this.praiseCount = praiseCount
    })
    this.getpostReplies().then(data => {
      data.forEach(item => {
        this.getappointPost(item.postId).then(data => {
          item.postTitle = data.title
        })
        this.postreplies.push(item)
      })
    })
  },
  components: {
    Header
  }
}
</script>
<style lang="less" scoped>
.home_container {
  width: 100%;
  main {
    display: flex;
    margin-top: 3px;
    margin-left: 5%;
    width: 90%;
    height: 500px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .left {
      width: 20%;
      height: 100%;
      border: 1px solid #e9e9e9;
      .portrait {
        display: flex;
        flex-direction: column;
        text-align: center;
        width: 100%;
        height: 260px;
        border-bottom: 1px solid #e9e9e9;
        .sendmsg {
          margin-bottom: 10px;
          font-size: 12px;
          font-weight: 600;
          .a {
            cursor: pointer;
          }
        }
        .sendmsg:hover {
          text-decoration: underline;
        }
        .avator {
          margin-top: 20px;
        }
        .post {
          font-size: 12px;
          color: #8e94ab;
          margin: 15px 0;
        }
        .ranking {
          display: flex;
          justify-content: space-between;
          width: 70%;
          height: 80px;
          margin-left: 15%;
          > div {
            width: 50px;
            height: 100%;
            div:nth-child(2) {
              margin-top: 5px;
              font-size: 13px;
              color: #8e94ab;
            }
          }
        }
      }
      ul {
        margin-top: 0;
        padding: 0;
        position: relative;
        li {
          height: 45px;
          text-align: center;
          line-height: 45px;
          border-bottom: 1px solid #e9e9e9;
          a {
            color: #999;
          }
          a:hover {
            color: #000;
            cursor: pointer;
            text-decoration: underline;
          }
          .aActive {
            color: #000;
          }
        }
        .active {
          border-left: 3px solid #0072eb;
        }
      }
      .follow {
        display: flex;
        justify-content: center;
      }
    }
    .right {
      width: 77%;
      height: 100%;
      padding: 20px;
    }
  }
}
</style>
